<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法4：v-model双向绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：v-model双向绑定</h1>
        <h3>我们可以使用v-model指令在表单input，textarea,select等元素进行双向绑定
            它会根据控件的类型自动获取正确的方法来更新元素，
            v-model会忽略所有表单元素的value、checked、selected等属性的初始值，
            他始终会将当前的JavaScript状态视为数据的正确来源
        </h3>
        <h3>1.单行文本框</h3>
        用户名：<input type="text" v-model="singleText"><br>
        输入的用户名是：{{singleText}}
        <h3>2.多行文本框</h3>
        个人简介<textarea name="" id="" v-model="multiText"></textarea><br>
        输入的个人简介是：{{multiText}}
        <h3>3.单选框</h3>
        <h4>单选框在实际中不可单独使用，要设置一个v-model统一的变量，
            即可实现radiogroup的效果
        </h4>
        性别：<input type="radio" value="0" v-model="radioValue">女
        <input type="radio" value="1" v-model="radioValue">男<br>
        输入的性别是：{{radioValue}}
        <h3>4.单个复选框：常用true或false的选择</h3>
        是否玩原神<input type="checkbox" v-model="toggleValue"><br>
        选择的结果：{{toggleValue}}
        <h3>5.多个复选框：使用v-model接受数组类型的变量</h3>
        旅伴：
        <input type="checkbox" value="夜兰" v-model="checkedValues">藏谷幽兰
        <input type="checkbox" value="枫原万叶" v-model="checkedValues">浮生如梦
        <input type="checkbox" value="雷电将军" v-model="checkedValues">一心净土
        <br>
        请选择你的英雄：{{checkedValues.join(',')}}
        <h3>6.单项下拉框</h3>
        <select name="" id="" v-model="singleSelect">
            <option value="蒙德">蒙德</option>
            <option value="璃月">璃月</option>
            <option value="稻妻">稻妻</option>
            <option value="须弥">须弥</option>
        </select>
        <p>原来的是从{{singleSelect}}来的啊！！！</p>
        <h3>7.多项选择框</h3>
        <select name="" id="" multiple v-model="multSelect">
            <option value="a">吃</option>
            <option value="b">喝</option>
            <option value="c">拉</option>
            <option value="d">撒</option>
        </select>
        <p>你选了这些：{{multSelect.join(',')}}</p>
        <h1>知识点2：v-model 修饰符</h1>
        <h3>1.  .lazy 修饰符 v-model在每次input事件触发后输入框的数据与比变量同步进行，
            添加lazy修饰符后，转变为change事件同步</h3>
            <input type="text" v-model.lazy="text">{{text}}
            <h3>2.  .number 修饰符</h3>
            <input type="text" v-model.number="num">{{num+1}}
            <h3>3.   .trim修饰符 可以自动过了前后的空格</h3>
            <input type="text" v-model="text">{{text+"你好"}}
    </div>
</body>
</html>
<script>
    const connApp = Vue.createApp({
        data() {
            return {
                singleText:'我是初始值',
                multiText:'原神6.2前瞻',
                radioValue:'',
                toggleValue:false,
                checkedValues:[],
                singleSelect:'',
                multSelect:[],
                text:'',
                num:''
            }
        },
    }).mount("#app")
</script>